<script setup>

import {ref} from "vue";
import axios from "axios";
//查询框的数据
let input = ref('')
//列表数据
let tableData = ref([]);

//分页参数
let pageNum = ref(1);
let pageSize = ref(5);
let total = ref(0)

const size = ref('default');
const multipleSelection =ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log(multipleSelection.value)
}
//展示数据
const FeedBack = async ()=>{
 try {
   const param = {
     pageNum:pageNum.value,
     pageSize:pageSize.value,
     type:input.value
   }
   const response = await axios.get("/api/hdx/find",{
     params:param
   })
   const pageInfo = response.data.data;
   console.log(pageInfo);
   tableData.value = pageInfo.list;
   total.value = pageInfo.total;
   pageSize.value = pageInfo.pageSize;
   pageNum.value = pageInfo.pageNum;
 }catch (error){
   console.log("传递数据失败",error);
 }
}
FeedBack();

//查询数据
function searchFeedback(){
  FeedBack();
}

//删除单行数据
async function deleteFeedback(id) {
  const confirmDelete = window.confirm('确定要删除该记录吗？');
  if (confirmDelete) {
    const remove = async () => {
      try {
        const response = await axios.delete(`/api/hdx/delete/${id}`);
        console.log(response.data)
      } catch (error) {
        console.log("删除失败", error)
      }
    }
    await remove();
    FeedBack();
  }
}

const handleSizeChange = ()=>{
  FeedBack();
}

const handleCurrentChange = ()=>{
  FeedBack();
}
//批量删除
const deleteBatch = async ()=> {
  const confirmDelete = window.confirm('确定要删除所选记录吗？');
  if (confirmDelete) {
  const removeBatch = async () => {
      const ids = multipleSelection.value.map(item => item.id);
      try {
        const response = await axios.delete("/api/hdx/batchs", {
          data: ids
        });
        console.log(response.data);
      } catch (error) {
        console.log("批量删除失败", error);
      }
    }
    await removeBatch();
    FeedBack();
  }
}
// 回复弹窗相关
const replyDialogVisible = ref(false);//弹出框的显示
const replyContent = ref('');//回复内容
const currentReplyRow = ref(null);
const openReplyDialog = (row) => {
  console.log("弹出框显示");
  replyDialogVisible.value = true;
  currentReplyRow.value = row;
  console.log(row)
  replyContent.value = row.feedback || '';
};

const closeReplyDialog = () => {
  replyDialogVisible.value = false;
  replyContent.value = '';
  currentReplyRow.value = null;
};

const submitReply = async () => {
  const update = async ()=>{
    const param = {
      id:currentReplyRow.value.id,
      feedback: replyContent.value
    }
  try {
    const response = await axios.get("/api/hdx/update",{
      params:param
        }
    );
    console.log(response.data);
    // 更新本地数据
    const index = tableData.value.findIndex(item => item.id === currentReplyRow.value.id);
    if (index!== -1) {
      tableData.value[index].feedback = replyContent.value;
    }
  } catch (error) {
    console.log("回复失败", error);
    }
  }
  await update();
  closeReplyDialog();
};

</script>

<template>
  <div style="margin-left: 15px">
    <div style="padding: 10px 0;border-bottom: solid 1px #cccccc; border-top: solid 1px #cccccc">
      <text style="font-weight: 600">首页</text> / 咨询预约管理 / 咨询回复管理
    </div>
    <div style="margin: 15px 0;display: flex">
      <el-input v-model="input" style="width: 240px" placeholder="请输入咨询类型" clearable/>
      <div style="position: relative;left: 10px">
        <el-button type="primary" @click="searchFeedback">搜索</el-button>
        <el-button type="danger" @click="deleteBatch">批量删除</el-button>
      </div>
    </div>
    <el-table :data="tableData"
              border
              style="width: 100%"
              ref="multipleTableRef"
              row-key="id"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="id" label="ID" align="center"/>
      <el-table-column prop="consultant.name" label="咨询师" align="center"/>
      <el-table-column prop="expertiseField.fieldName" label="咨询类型" align="center"/>
      <el-table-column prop="time" label="咨询时间" align="center"/>
      <el-table-column prop="content" label="咨询内容" align="center"/>
      <el-table-column prop="feedback" label="回复内容" align="center"/>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="{ row }">
          <span v-if="row.status === 0" style="color: green">未回复</span>
          <span v-if="row.status === 1" style="color: skyblue">已评价</span>
          <span v-if="row.status === 2" style="color: red">未评价</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template #default = "scope">
          <el-button
              type="primary"
              @click="openReplyDialog(scope.row)"
          >回复</el-button>
          <el-button
              type="danger"
              @click="deleteFeedback(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
        v-model="replyDialogVisible"
        title="回复咨询"
        @close="closeReplyDialog"
    >
        <el-input
            v-model="replyContent"
            type="textarea"
            placeholder="请输入回复内容"
            autosize
        />
      <template #footer>
        <span>
          <el-button @click="closeReplyDialog">取消</el-button>
          <el-button
              type="primary"
              @click="submitReply"
          >确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>